<template>
	<swiper class="swiper" :autoplay="false" :current="current" :previous-margin="margin"
		:next-margin="margin" :circular="false" @change="swiperChange" :interval="2000">
		<swiper-item v-for="(item, index) in list" :key="index">
			<view class="goods_box" >
				<w-index-collection :product="item"></w-index-collection>						
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	import productMixin from "@/mixins/product.js"
	export default {
		mixins: [productMixin],
		props:{
			list:{
				type:Array,
				default: () => {
					return []
				}
			}
		},
		watch:{
			list(newVlue){
				this.current = 0
			}
		},
		data(){
			return {
				current: 0,
				margin: '60rpx'
			}
		},
		methods:{
			swiperChange(e){
				this.current = e.detail.current
			}
		}
	}
</script>
<style lang="scss" scoped>

.swiper {
	box-sizing: border-box;
			height: 896rpx;
			.goods_box {
				width: 600rpx;
				height: 100%;
				// transform: scale(0.9);
				// transition: transform 0.3s ease-in-out 0s;
				background-image: url($IMG_URL + '/static/bg/index-goods.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				padding: 110rpx 40rpx 34rpx;
				box-sizing: border-box;
				
			}
		}


</style>